@{
    ViewData["Title"] = "编辑装箱单";
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>编辑装箱单</title>
    <link href="~/scripts/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
    <script src="~/scripts/jquery-3.4.1.min.js"></script>
    <script src="~/scripts/layui-v2.5.6/layui/layui.js"></script>
    <style>
        body {
            margin: 0;
            padding: 15px;
            background: #f2f2f2;
            font-family: 'Microsoft YaHei', sans-serif;
        }
        .form-container {
            padding: 20px;
            background: #fff;
            border-radius: 2px;
            box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
        }
        .layui-form-item {
            margin-bottom: 25px;
        }
        .footer-btns {
            text-align: center;
            margin-top: 30px;
            padding-bottom: 30px;
        }
        .layui-form-label {
            width: 120px;
        }
        .layui-input-block {
            margin-left: 150px;
        }
        .required:after {
            content: '*';
            color: red;
            margin-left: 4px;
        }
        .layui-form-select dl {
            max-height: 200px;
        }
    </style>
</head>
<body>
    <div class="form-container">
        <form class="layui-form" lay-filter="editForm">
            <input type="hidden" name="id" value="@ViewBag.Id" />
            
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md6">
                    <div class="layui-form-item">
                        <label class="layui-form-label required">装箱单编号</label>
                        <div class="layui-input-block">
                            <input type="text" name="packingCode" required lay-verify="required" placeholder="请输入装箱单编号" class="layui-input" readonly>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="layui-form-item">
                        <label class="layui-form-label required">装箱日期</label>
                        <div class="layui-input-block">
                            <input type="text" name="packingDate" required lay-verify="required" placeholder="请选择装箱日期" class="layui-input" id="packingDate">
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-row layui-col-space15">
                <div class="layui-col-md6">
                    <div class="layui-form-item">
                        <label class="layui-form-label">销售订单编号</label>
                        <div class="layui-input-block">
                            <input type="text" name="saleOrderCode" placeholder="请输入销售订单编号" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="layui-form-item">
                        <label class="layui-form-label">发票编号</label>
                        <div class="layui-input-block">
                            <input type="text" name="invoiceCode" placeholder="请输入发票编号" class="layui-input">
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-row layui-col-space15">
                <div class="layui-col-md6">
                    <div class="layui-form-item">
                        <label class="layui-form-label">客户编码</label>
                        <div class="layui-input-block">
                            <input type="text" name="customerCode" placeholder="请输入客户编码" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="layui-form-item">
                        <label class="layui-form-label">客户名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="customerName" placeholder="请输入客户名称" class="layui-input">
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-row layui-col-space15">
                <div class="layui-col-md4">
                    <div class="layui-form-item">
                        <label class="layui-form-label">箱长度</label>
                        <div class="layui-input-block">
                            <input type="number" name="packingLength" placeholder="请输入箱长度" class="layui-input" lay-verify="number">
                        </div>
                    </div>
                </div>
                <div class="layui-col-md4">
                    <div class="layui-form-item">
                        <label class="layui-form-label">箱宽度</label>
                        <div class="layui-input-block">
                            <input type="number" name="packingWidth" placeholder="请输入箱宽度" class="layui-input" lay-verify="number">
                        </div>
                    </div>
                </div>
                <div class="layui-col-md4">
                    <div class="layui-form-item">
                        <label class="layui-form-label">箱高度</label>
                        <div class="layui-input-block">
                            <input type="number" name="packingHeight" placeholder="请输入箱高度" class="layui-input" lay-verify="number">
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-row layui-col-space15">
                <div class="layui-col-md6">
                    <div class="layui-form-item">
                        <label class="layui-form-label">尺寸单位</label>
                        <div class="layui-input-block">
                            <select name="packingSize">
                                <option value="">请选择尺寸单位</option>
                                <option value="mm">毫米(mm)</option>
                                <option value="cm">厘米(cm)</option>
                                <option value="m">米(m)</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="layui-form-item">
                        <label class="layui-form-label">重量单位</label>
                        <div class="layui-input-block">
                            <select name="unitWeight">
                                <option value="">请选择重量单位</option>
                                <option value="g">克(g)</option>
                                <option value="kg">千克(kg)</option>
                                <option value="t">吨(t)</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-row layui-col-space15">
                <div class="layui-col-md6">
                    <div class="layui-form-item">
                        <label class="layui-form-label">净重</label>
                        <div class="layui-input-block">
                            <input type="number" name="netWeight" placeholder="请输入净重" class="layui-input" lay-verify="number">
                        </div>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="layui-form-item">
                        <label class="layui-form-label">毛重</label>
                        <div class="layui-input-block">
                            <input type="number" name="grossWeight" placeholder="请输入毛重" class="layui-input" lay-verify="number">
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-row layui-col-space15">
                <div class="layui-col-md6">
                    <div class="layui-form-item">
                        <label class="layui-form-label">检查员</label>
                        <div class="layui-input-block">
                            <input type="text" name="inspector" placeholder="请输入检查员" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="layui-form-item">
                        <label class="layui-form-label required">状态</label>
                        <div class="layui-input-block">
                            <select name="state" lay-verify="required">
                                <option value="0">草稿</option>
                                <option value="1">已确认</option>
                                <option value="2">已完成</option>
                                <option value="3">已取消</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            <div class="footer-btns">
                <button type="submit" class="layui-btn" lay-submit lay-filter="saveForm">
                    <i class="layui-icon layui-icon-ok"></i> 保存
                </button>
                <button type="button" class="layui-btn layui-btn-primary" id="cancelBtn">
                    <i class="layui-icon layui-icon-close"></i> 取消
                </button>
            </div>
        </form>
    </div>

    <script>
        layui.use(['form', 'laydate', 'layer'], function () {
            var form = layui.form,
                laydate = layui.laydate,
                layer = layui.layer,
                $ = layui.jquery;

            // 自定义验证规则
            form.verify({
                number: [
                    /^-?\d*\.?\d*$/,
                    '请输入有效的数字'
                ],
                positiveNumber: function(value, item) {
                    if (value && parseFloat(value) <= 0) {
                        return '请输入大于0的数字';
                    }
                }
            });

            // 初始化日期选择器
            laydate.render({
                elem: '#packingDate',
                type: 'date'
            });

            // 加载数据
            var id = $('input[name="id"]').val();
            if (id) {
                $.ajax({
                    url: '/Packing/GetById',
                    type: 'GET',
                    data: { id: id },
                    success: function (res) {
                        if (res.success && res.data) {
                            try {
                                // 设置表单数据
                                var formData = res.data;
                                // 处理日期格式
                                if (formData.packingDate) {
                                    var date = new Date(formData.packingDate);
                                    if (!isNaN(date.getTime())) {
                                        formData.packingDate = layui.util.toDateString(date, 'yyyy-MM-dd');
                                    }
                                }
                                // 处理数值类型
                                ['packingLength', 'packingWidth', 'packingHeight', 'netWeight', 'grossWeight'].forEach(function(field) {
                                    if (formData[field] !== null && formData[field] !== undefined) {
                                        formData[field] = parseFloat(formData[field]);
                                        if (isNaN(formData[field])) {
                                            formData[field] = '';
                                        }
                                    }
                                });
                                form.val('editForm', formData);
                                // 重新渲染表单
                                form.render();
                            } catch (e) {
                                console.error('数据处理错误:', e);
                                layer.msg('数据处理出错: ' + e.message, { icon: 2 });
                            }
                        } else {
                            layer.msg(res.message || '获取数据失败', { icon: 2 });
                        }
                    },
                    error: function (xhr, status, error) {
                        console.error('请求错误:', error);
                        layer.msg('服务器错误: ' + error, { icon: 2 });
                    }
                });
            }

            // 监听表单提交
            form.on('submit(saveForm)', function (data) {
                try {
                    var formData = data.field;
                    
                    // 验证必填字段
                    if (!formData.packingCode) {
                        layer.msg('装箱单编号不能为空', { icon: 2 });
                        return false;
                    }
                    if (!formData.packingDate) {
                        layer.msg('装箱日期不能为空', { icon: 2 });
                        return false;
                    }
                    
                    // 转换日期格式
                    if (formData.packingDate) {
                        var date = new Date(formData.packingDate + ' 00:00:00');
                        if (isNaN(date.getTime())) {
                            layer.msg('无效的日期格式', { icon: 2 });
                            return false;
                        }
                        formData.packingDate = date.toISOString();
                    }

                    // 转换数值类型
                    formData.state = parseInt(formData.state || 0);

                    // 处理数值字段，如果为空则设置为null
                    ['packingLength', 'packingWidth', 'packingHeight', 'netWeight', 'grossWeight'].forEach(function(field) {
                        if (formData[field] === '') {
                            formData[field] = null;
                        } else if (formData[field]) {
                            formData[field] = formData[field].toString();
                        }
                    });

                    // 显示加载提示
                    var loadIndex = layer.load(1, {
                        shade: [0.1, '#fff']
                    });

                    // 打印提交的数据，用于调试
                    console.log('提交的数据:', formData);

                    $.ajax({
                        url: '/Packing/Update',
                        type: 'POST',
                        contentType: 'application/json',
                        data: JSON.stringify(formData),
                        success: function (res) {
                            layer.close(loadIndex);
                            if (res.success) {
                                layer.msg('保存成功', {
                                    icon: 1,
                                    time: 1000
                                }, function () {
                                    // 刷新父页面表格
                                    if (parent.layui.table) {
                                        parent.layui.table.reload('dataTable');
                                    }
                                    // 关闭当前弹窗
                                    var index = parent.layer.getFrameIndex(window.name);
                                    parent.layer.close(index);
                                });
                            } else {
                                layer.msg(res.message || '保存失败', { icon: 2 });
                                console.error('保存失败:', res);
                            }
                        },
                        error: function (xhr, status, error) {
                            layer.close(loadIndex);
                            console.error('请求错误:', {
                                status: status,
                                error: error,
                                response: xhr.responseText
                            });
                            layer.msg('服务器错误: ' + error, { icon: 2 });
                        }
                    });
                } catch (e) {
                    console.error('提交处理错误:', e);
                    layer.msg('提交处理出错: ' + e.message, { icon: 2 });
                }
                return false;
            });

            // 取消按钮点击事件
            $('#cancelBtn').click(function () {
                var index = parent.layer.getFrameIndex(window.name);
                parent.layer.close(index);
            });

            // 监听数值输入
            $('input[type="number"]').on('input', function() {
                var value = $(this).val();
                if (value && !(/^-?\d*\.?\d*$/.test(value))) {
                    $(this).val('');
                    layer.msg('请输入有效的数字', { icon: 2 });
                }
            });
        });
    </script>
</body>
</html> 